<template>
  <div v-if="showJianpan">
    <div class="jianpan-box" v-if="keyType === 1">
      <div
        class="flex items-center justify-center"
        :style="{ gap: props.gap, marginBottom: props.gap }"
      >
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('1')"
        >
          1
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('2')"
        >
          2
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('3')"
        >
          3
        </div>
      </div>
      <div
        class="flex items-center justify-center"
        :style="{ gap: props.gap, marginBottom: props.gap }"
      >
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('4')"
        >
          4
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('5')"
        >
          5
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('6')"
        >
          6
        </div>
      </div>
      <div
        class="flex items-center justify-center"
        :style="{ gap: props.gap, marginBottom: props.gap }"
      >
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('7')"
        >
          7
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('8')"
        >
          8
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('9')"
        >
          9
        </div>
      </div>
      <div class="flex items-center justify-center" :style="{ gap: props.gap }">
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('ABC')"
        >
          ABC
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('0')"
        >
          0
        </div>
        <div
          class="jian"
          :style="{
            width: props.numWidth + 'rpx',
            height: props.numHeight + 'rpx',
          }"
          @click="keyD('退格')"
        >
          <span
            class="iconfont icon-shanchu_delete-two font-size-27 font-weight-700"
          ></span>
        </div>
      </div>
    </div>
    <div class="jianpan-box" v-if="keyType === 0">
      <div
        class="flex items-center justify-center"
        :style="{ gap: props.gap, marginBottom: props.gap }"
      >
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('Q')"
        >
          Q
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('W')"
        >
          W
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('E')"
        >
          E
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('R')"
        >
          R
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('T')"
        >
          T
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('Y')"
        >
          Y
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('U')"
        >
          U
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('I')"
        >
          I
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('O')"
        >
          O
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('P')"
        >
          P
        </div>
      </div>
      <div
        class="flex items-center justify-center"
        :style="{ gap: props.gap, marginBottom: props.gap }"
      >
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('A')"
        >
          A
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('S')"
        >
          S
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('D')"
        >
          D
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('F')"
        >
          F
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('G')"
        >
          G
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('H')"
        >
          H
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('J')"
        >
          J
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('K')"
        >
          K
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('L')"
        >
          L
        </div>
      </div>
      <div class="flex items-center justify-center" :style="{ gap: props.gap }">
        <div
          class="jian jian-num"
          :style="{
            width: props.width * 1.4 + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('123')"
        >
          123
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('Z')"
        >
          Z
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('X')"
        >
          X
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('C')"
        >
          C
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('V')"
        >
          V
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('B')"
        >
          B
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('N')"
        >
          N
        </div>
        <div
          class="jian"
          :style="{
            width: props.width + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('M')"
        >
          M
        </div>
        <div
          class="jian jian-del"
          :style="{
            width: props.width * 1.4 + 'rpx',
            height: props.height + 'rpx',
          }"
          @click="keyD('退格')"
        >
          <span
            class="iconfont icon-shanchu_delete-two font-size-27 font-weight-700"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  gap: {
    type: String,
    default: "5rpx",
  },

  width: {
    type: String,
    default: "1.1",
  },
  height: {
    type: String,
    default: "1",
  },
  numWidth: {
    type: String,
    default: "90",
  },
  numHeight: {
    type: String,
    default: "54",
  },
  numGap: {
    type: String,
    default: "15rpx",
  },
});
const emit = defineEmits(["update:modelValue", "inputChange", "confirm"]);
const keyType = ref(0);
const showJianpan = ref(false);

function keyD(e) {
  switch (e) {
    case "退格":
      const v = props.modelValue.slice(0, -1);
      emit("update:modelValue", v);
      emit("inputChange", v);
      break;
    case "123":
      keyType.value = 1;
      break;
    case "ABC":
      keyType.value = 0;
      break;
    // case "确定":
    //   emit("confirm", props.modelValue);
    //   showJianpan.value = false;
    //   break;
    default:
      const v1 = props.modelValue + e;
      emit("update:modelValue", v1);
      emit("inputChange", v1);
      break;
  }
}

function switchShowJianpan(b) {
  if (b != undefined) {
    showJianpan.value = b;
  } else {
    showJianpan.value = !showJianpan.value;
  }
}

defineExpose({
  switchShowJianpan,
});
</script>
<style lang="scss" scoped>
.jianpan-box {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: center;
  // gap: 5rpx;
  > div {
    &:nth-last-child(1) {
      margin-bottom: 0 !important;
    }
    .jian {
      width: 64rpx;
      height: 54rpx;
      background-color: #fff;
      border-radius: 4rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18rpx;
      color: $uni-text-color-1;
      &:active {
        background-color: #f5f5f5;
      }
    }
    .jian-num,
    .jian-del {
      width: 90rpx;
      height: 54rpx;
    }
  }
}
</style>
